<template>
  <div class="container">


    <div class="announcement-container">
      <el-carousel
          height="50px"
          direction="vertical"
          :interval="2000"
          indicator-position="none"
          :motion-blur="true"
          arrow="never">
        <el-carousel-item v-for="(announcement, index) in announcements" :key="index">
          <p class="announcement-text">{{ announcement }}</p>
        </el-carousel-item>
      </el-carousel>
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue";

const announcements = ref([
  "公告一：欢迎使用本系统！",
  "公告二：系统维护时间为每周六凌晨2:00-4:00。",
  "公告三：新版本功能即将上线，敬请期待！",
]);
</script>

<style scoped>
.announcement-container {
  width: 100%;
  background-color: #f5f5f5;
  padding: 10px;
  border-radius: 5px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.announcement-text {
  font-size: 14px;
  color: #333;
  text-align: center;
  margin: 0;
  line-height: 50px;
}
</style>
